<!doctype html>
<html>

	<head></head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>会员登录</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
	<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/include.js" ></script>
	<!-- 引入自定义css文件 style.css -->
	<link rel="stylesheet" href="css/style.css" type="text/css" />

	<style>
		body {
			margin-top: 20px;
			margin: 0 auto;
		}
		
		.carousel-inner .item img {
			width: 100%;
			height: 300px;
		}
		
		.container .row div {
			/* position:relative;
	 float:left; */
		}
		
		font {
			color: #3164af;
			font-size: 18px;
			font-weight: normal;
			padding: 0 10px;
		}
	</style>
	</head>

	<body>
				<div id="header"></div>
	

		<div class="container" style="width:100%;background:url('image/regist_bg.jpg');">
			<div class="row">

				<div class="col-md-2"></div>

				<div id="registerForm" class="col-md-8" style="background:#fff;padding:40px 80px;margin:30px;border:7px solid #ccc;">
					<font>会员注册</font>USER REGISTER
					<form class="form-horizontal" style="margin-top:5px;">
						<div class="form-group">
							<label for="username" class="col-sm-2 control-label">用户名</label>
							<div class="col-sm-6">
								<input type="text" v-model="username" class="form-control" id="username" placeholder="请输入用户名">
							</div>
							<p id="usernameInfo"></p>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
							<div class="col-sm-6">
								<input type="password" v-model="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
							</div>
								<p id="inputPassword3Info"></p>
						</div>
						<div class="form-group">
							<label for="confirmpwd" class="col-sm-2 control-label">确认密码</label>
							<div class="col-sm-6">
								<input type="password" v-model="repassword" class="form-control" id="confirmpwd" placeholder="请输入确认密码">
							</div>
							<p id="confirpwdInfo"></p>
						</div>
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
							<div class="col-sm-6">
								<input type="email" v-model="email" class="form-control" id="inputEmail3" placeholder="Email">
							</div>
							<p id="inputEmail3Info"></p>
						</div>
						<div class="form-group">
							<label for="usercaption" class="col-sm-2 control-label">姓名</label>
							<div class="col-sm-6">
								<input type="text" v-model="name" class="form-control" id="usercaption" placeholder="请输入姓名">
							</div>
							<p id="usercaptionInfo"></p>
						</div>
						<div class="form-group opt">
							<label for="inlineRadio1" class="col-sm-2 control-label">性别</label>
							<div class="col-sm-6">
								<label class="radio-inline">
			  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="男"> 男
			</label>
								<label class="radio-inline">
			  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="女"> 女
			</label>
							</div>
							<p id="sexInfo"></p>
						</div>
						<div class="form-group">
							<label for="date" class="col-sm-2 control-label">出生日期</label>
							<div class="col-sm-6">
								<input id="birthday" v-model="birthday" type="date" class="form-control">
							</div>
							<p id="birthdayInfo"></p>
						</div>

						<div class="form-group">
							<label for="date" class="col-sm-2 control-label">验证码</label>
							<div class="col-sm-3">
								<input type="text" id="code"  v-model="code" class="form-control">
							</div>
							<div class="col-sm-2">
								<img id="vcode" src="http://127.0.0.1:8092/ShopManagement/user/getVeriFicationCode" />
							</div>
							<p id="codeInfo"></p>
						</div>

						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<input type="button" width="100" id="regis" value="注册" name="submit" border="0" style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
				    height:35px;width:100px;color:white;">
							</div>
						</div>
					</form>
				</div>

				<div class="col-md-2"></div>

			</div>
		</div>

		<div style="margin-top:50px;">
			<img src="./image/footer.jpg" width="100%" height="78" alt="我们的优势" title="我们的优势" />
		</div>

		<div style="text-align: center;margin-top: 5px;">
			<ul class="list-inline">
				<li>
					<a>关于我们</a>
				</li>
				<li>
					<a>联系我们</a>
				</li>
				<li>
					<a>招贤纳士</a>
				</li>
				<li>
					<a>法律声明</a>
				</li>
				<li>
					<a>友情链接</a>
				</li>
				<li>
					<a target="_blank">支付方式</a>
				</li>
				<li>
					<a target="_blank">配送方式</a>
				</li>
				<li>
					<a>服务声明</a>
				</li>
				<li>
					<a>广告声明</a>
				</li>
			</ul>
		</div>
		<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
			Copyright &copy; 2005-2016 天虎商城 版权所有
		</div>

	</body>
	<script type="text/javascript" src="js/vue.js"  ></script>
	<script type="text/javascript" src="js/axios.min.js" ></script>
	<script type="text/javascript" src="js/header.js" ></script>
	<script>
		
		var registerForm = new Vue({
			el: "#registerForm",
			data: {
				username: $("#username").val(),
				password:$("#inputPassword3").val(),
				repassword:$("#confirmpwd").val(),
				email: $("#inputEmail3").val(),
				name: $("#usercaption").val(),
				sex: $("input[name='inlineRadioOptions']:checked").val(),
				birthday: $("#birthday").val(),
				code: $("#code").val()
			},
			methods: {},
			mounted: function() {
				//检测用户名是否合格
				$("#username").blur(function() {
					//用户不能为空
					if($("#username").val() == "") {
						$("#usernameInfo").css("color", "red").html("用户名不能为空！ ");
						//将注册按钮禁用
						$("#regis").attr("disabled", "disabled");
					} else { //用户名不能已被使用
						axios({
							url: "/ShopManagement/user/checkUserNameExist",
							method: "post",
							params: {
								uname: registerForm.username,
							}
						}).then(function(response) {
							if(response.data == 0) {
								$("#usernameInfo").css("color", "green").html("恭喜你， 用户名可用");
								$("#regis").removeAttr("disabled");

							} else {

								$("#usernameInfo").css("color", "red").html("用户名已被占用！ ");
								//将注册按钮禁用
								$("#regis").attr("disabled", "disabled");
							}
						}).catch(function(reason) {
							console.log("请求失败");
						});
					}
				});
				$("#inlineRadio1").attr("checked",true); //性别单选框默认选中
				$("#regis").attr("disabled", "disabled"); //默认设置提交框为不可选,输入完成后才可选
				$("#inputPassword3").blur(function() {
					var eval = $("#inputPassword3").val();
					if(eval == "") {
						$("#inputPassword3Info").css("color", "red").html("密码不能为空！ ");
						//将注册按钮禁用
						$("#regis").attr("disabled", "disabled");
					}else{
						$("#inputPassword3Info").css("color", "green").html("密码合法");
						$("#regis").removeAttr("disabled");
					}
				});
				$("#confirmpwd").blur(function() {
					var eval = $("#confirmpwd").val();
					if(eval == "") {
						$("#confirpwdInfo").css("color", "red").html("请重新输入密码！ ");
						//将注册按钮禁用
						$("#regis").attr("disabled", "disabled");
					}else if(eval!=$("#inputPassword3").val()){
						$("#confirpwdInfo").css("color", "red").html("两次密码不一致！ ");
						//将注册按钮禁用
						$("#regis").attr("disabled", "disabled");
					}else{
						$("#confirpwdInfo").css("color", "green").html("两次密码一致");
						$("#regis").removeAttr("disabled");
					}
				});
				$("#usercaption").blur(function() {
					var eval = $("#usercaption").val();
					if(eval == "") {
						$("#usercaptionInfo").css("color", "red").html("名字不能为空！ ");
						//将注册按钮禁用
						$("#regis").attr("disabled", "disabled");
					}else{
						$("#usercaptionInfo").css("color", "green").html("正确");
						$("#regis").removeAttr("disabled");
					}
				});
				$("#birthday").blur(function() {
					var eval = $("#birthday").val();
					if(eval == "") {
						$("#birthdayInfo").css("color", "red").html("生日不能为空！ ");
						//将注册按钮禁用
						$("#regis").attr("disabled", "disabled");
					}else{
						$("#birthdayInfo").css("color", "green").html("");
						$("#regis").removeAttr("disabled");
					}
				});
				$("#code").blur(function() {
					var eval = $("#code").val();
					if(eval == "") {
						$("#codeInfo").css("color", "red").html("验证码不能为空！ ");
						//将注册按钮禁用
						$("#regis").attr("disabled", "disabled");
					}else{
						$("#codeInfo").css("color", "green").html("");
						$("#code").removeAttr("disabled");
					}
				});
				//检测邮箱是否已合格
				$("#inputEmail3").blur(function() {
					var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
					var eval = $("#inputEmail3").val();
					if(eval == "") {
						$("#inputEmail3Info").css("color", "red").html("邮箱不能为空！ ");
						//将注册按钮禁用
						$("#regis").attr("disabled", "disabled");
					} else if(!reg.test(eval)) {
						$("#inputEmail3Info").css("color", "red").html("邮箱不合法！ ");
						//将注册按钮禁用
						$("#regis").attr("disabled", "disabled");
					} else { //用户名不能已被使用
						axios({

							url: "/ShopManagement/user/checkUserEmailExist",
							method: "post",
							params: {
								email: registerForm.email,
							}
						}).then(function(response) {
							if(response.data == 0) {
								$("#inputEmail3Info").css("color", "green").html("恭喜你， 邮箱可用");
								$("#regis").removeAttr("disabled");

							} else {

								$("#inputEmail3Info").css("color", "red").html("邮箱已被注册！ ");
								//将注册按钮禁用
								$("#regis").attr("disabled", "disabled");
							}
						}).catch(function(reason) {
							console.log("请求失败");
						});
					}
				});
				$("#birthday").blur(function() {
					console.log($("#birthday").val());
				});
				//点击验证码图片获得验证码
				$("#vcode").click(function() {
					changeCodePic();
				});
				//注册按钮点击
				$("#regis").click(function() {
					var data = {
						username: registerForm.username,
						password: registerForm.password,
						name: registerForm.name,
						email: registerForm.email,
						sex: registerForm.sex,
						birthday:registerForm.birthday,
						code: registerForm.code
					}
					if(data.username==""){
						alert("用户名不能为空");
						return false;
					}else if(data.password==""){
						alert("密码不能为空");
						return false;
						
					}else if(data.name==""){
						alert("名字不能为空");
						return false;
						
					}else if(data.email==""){
						alert("邮箱不能为空");
						return false;
						
					}else if(data.sex==""){
						alert("性别不能为空");
						return false;
						
					}else if(data.birthday==""){
						alert("生日不能为空");
						return false;
						
					}else if(data.code==""){
						alert("验证码不能为空");
						return false;
					}
					axios({
						url: "/ShopManagement/user/registerNewUser",
						method: "post",
						params: data,
					}).then(function(response) {
						alert(response.data.message);
						if(!response.data.state){
							changeCodePic();
						}
					}).catch(function(reason) {
						console.log("请求失败");
					});

				});
			}
		})
	</script>

</html>